<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    @open="initDialog"
    @close="closeDislog"
    :show-close="false"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <component
      :is="componentId"
      @closeDislog="closeDislog"
      :formData="formData"
    ></component>
  </el-dialog>
</template>

<script>
import VSANSwitchForm from "./SANSwitchForm.vue";
import VstorageForm from "./storageForm.vue";
import VserverForm from "./serverForm.vue";
import VswitchForm from "./switchForm.vue";
export default {
  props: ["title", "dialogVisible", "TYPE", "formData"],
  components: {
    VSANSwitchForm,
    VstorageForm,
    VserverForm,
    VswitchForm,
  },
  created() {},
  data() {
    return {
      componentId: "",
      formType: {
        switch: "VswitchForm",
        server: "VserverForm",
        storage: "VstorageForm",
        SANswitch: "VSANSwitchForm",
      },
    };
  },
  methods: {
    initDialog() {
      this.componentId = this.formType[this.TYPE];
    },
    closeDislog() {
      this.$emit("closeDislog");
    },
  },
};
</script>

<style lang="scss" scoped></style>
